<template>
	<view class="rechange">
		<view class="banner">
			<view class="title">
				<view class="title_name">
					生活缴费
				</view>
				<view class="info">
					便民服务一网打尽
				</view>
			</view>
		</view>

		<view class="big_content">

			<view class="re_box">
				<u-tabs :list="list1"
					itemStyle="padding-left: 32rpx; padding-right: 32rpx; height: 80rpx;background: #fff;"
					:activeStyle="{color: '#000000',fontWeight: 'bold'}" :lineColor="'#FC6758'" @click="click">
				</u-tabs>
				<view v-if="type==1" class="input_box">
					<view class="input_title">
						手机号
					</view>
					<view class="input_in">
						<u--input border="none" placeholder="请输入充值的手机号" v-model="phone"></u--input>
					</view>
				</view>
				<view v-if="type==2" class="input_box">
					<view class="input_title">
						户号
					</view>
					<view class="input_in">
						<u--input border="none" placeholder="请输入充值的户号" v-model="ennum"></u--input>
					</view>
					<view class="input_title">
						户号所在省份
					</view>
					<view class="input_in">
						<u--input border="none" placeholder="请输入充值的户号所在省份" v-model="address"></u--input>
					</view>
				</view>

				<view v-if="type==1" class="cho_box">
					<view @click="whoacttabs(3)" class="cho_item">
						<image v-if="whoact==3" src="../../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../../static/tabsIcon/co2.png" mode=""></image>
						<text>中国移动</text>
					</view>
					<view @click="whoacttabs(4)" class="cho_item">
						<image v-if="whoact==4" src="../../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../../static/tabsIcon/co2.png" mode=""></image>
						<text>中国联通</text>
					</view>
					<view @click="whoacttabs(5)" class="cho_item">
						<image v-if="whoact==5" src="../../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../../static/tabsIcon/co2.png" mode=""></image>
						<text>中国电信</text>
					</view>
				</view>
				<view v-if="type==2" class="cho_box">
					<view @click="whoactstabs(1)" class="cho_item">
						<image v-if="whoacts==1" src="../../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../../static/tabsIcon/co2.png" mode=""></image>
						<text>住宅</text>
					</view>
					<view @click="whoactstabs(2)" class="cho_item">
						<image v-if="whoacts==2" src="../../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../../static/tabsIcon/co2.png" mode=""></image>
						<text>店铺</text>
					</view>
					<view @click="whoactstabs(3)" class="cho_item">
						<image v-if="whoacts==3" src="../../../static/tabsIcon/co1.png" mode=""></image>
						<image v-else src="../../../static/tabsIcon/co2.png" mode=""></image>
						<text>企事业</text>
					</view>
				</view>

				<view v-if="whoact!=0 || type==2" class="kou_box">
					折扣：{{zhe}}折
				</view>

				<view class="price_box">
					<view @click="numacttabs(0)" :class="numact==0?'act pri_item':'pri_item'">
						<text class="num">50</text>
						<text class="yuan">元</text>
					</view>
					<view @click="numacttabs(1)" :class="numact==1?'act pri_item':'pri_item'">
						<text class="num">100</text>
						<text class="yuan">元</text>
					</view>
					<view @click="numacttabs(2)" :class="numact==2?'act pri_item':'pri_item'">
						<text class="num">200</text>
						<text class="yuan">元</text>
					</view>
				</view>

				<view class="way">
					支付方式
				</view>

				<view class="pay_box">
					<view @click="tabss(1)" class="pay_item">
						<view class="pay_left">
							<image src="../../../static/tabsIcon/payment/we.png" mode=""></image>
							<text>微信支付</text>
						</view>
						<view class="pay_right">
							<image v-if="act==1" src="../../../static/tabsIcon/co1.png" mode=""></image>
							<image v-else src="../../../static/tabsIcon/co2.png" mode=""></image>
						</view>
					</view>
					<view @click="tabss(2)" class="pay_item">
						<view class="pay_left">
							<image src="../../../static/tabsIcon/payment/ali.png" mode=""></image>
							<text>支付宝</text>
						</view>
						<view class="pay_right">
							<image v-if="act==2" src="../../../static/tabsIcon/co1.png" mode=""></image>
							<image v-else src="../../../static/tabsIcon/co2.png" mode=""></image>
						</view>
					</view>
					<view @click="tabss(0)" class="pay_item">
						<view class="pay_left">
							<image src="../../../static/tabsIcon/payment/ye.png" mode=""></image>
							<text>账户余额</text>
						</view>
						<view class="pay_right">
							<image v-if="act==0" src="../../../static/tabsIcon/co1.png" mode=""></image>
							<image v-else src="../../../static/tabsIcon/co2.png" mode=""></image>
						</view>
					</view>
				</view>

			</view>

			<view class="tips">
				<text>充值须知：充值时间为1-12小时到账</text>
				<text>携号转网的手机号无法充值</text>
			</view>
			<view class="butt">
				<view @click="tore" class="btn">
					立即充值
				</view>
			</view>
		</view>
		<pay-keyboard @Fpassword="Fpassword" ref="password" :show_key="show_key" @hideFun="hideFun"
			@getPassword="getPassword"></pay-keyboard>
	</view>
</template>

<script>
	import payKeyboard from '@/components/keyboard.vue'
	import {
		phrecharge,
		rechargediscount,
		getPhoneOffOrOn
	} from '@/api/home'
	import {
		checkpass
	} from '@/api/mine'
	export default {
		components: {
			payKeyboard: payKeyboard
		},
		data() {
			return {
				phone: '',
				type: 1,
				whoact: 0,
				whoacts: 0,
				numact: 4,
				speact: 0,
				act: 4,
				pass: '',
				show: false,
				show_key: false,
				paypass: '',
				address: '',
				ennum: '',
				zhe: '',
				oplist: [],
				pascheck: false,
				list1: [{
						name: '话费充值',
						value: 1
					},
					{
						name: '电费充值',
						value: 2
					}
				]
			}
		},
		onLoad() {
			this.getPhoneOffOrOn();
			this.checkpass();
		},
		methods: {
			checkpass() {
				checkpass().then(res => {
					this.pascheck = res.data;
				})
			},
			getPhoneOffOrOn() {
				getPhoneOffOrOn().then(res => {
					this.oplist = res.data;
				})
			},
			getzhe() {
				let data
				if (this.whoact == 5) {
					data = 'telecom_phone_discount'
				} else if (this.whoact == 3) {
					data = 'move_phone_discount'
				} else if (this.type == 2) {
					data = 'sys_ele_discount'
				} else if (this.whoact == 4) {
					data = 'unicom_phone_discount'
				} else {
					return
				}
				rechargediscount(data).then(res => {
					if (res.success == 1) {
						this.zhe = res.data.data * 100
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}

				})
			},
			changetype(i) {
				this.type = i;
				this.phone = '';
				this.address = '';
				this.ennum = '';
				this.whoact = 0;
				this.whoacts = 0;
				this.getzhe();
			},
			Fpassword() {
				uni.navigateTo({
					url: '../../mine/forgetpass'
				})
			},
			showFun() {
				this.show_key = true
			},
			hideFun() {
				this.show_key = false
			},
			getPassword(n) {
				// console.log("用户输入的密码", n)
				this.paypass = n.password;
				this.$refs.password.clier()
				this.hideFun()
				if (this.type == 1) {
					this.rechange()
				} else {
					this.dianrechange()
				}

			},
			tore() {
				if (this.oplist.unicomType == 0 && this.whoact == 4) {
					uni.showToast({
						icon: 'none',
						title: '充值渠道正在升级，请稍后重试!'
					})
					return
				}
				if (this.oplist.moveType == 0 && this.whoact == 3) {
					uni.showToast({
						icon: 'none',
						title: '充值渠道正在升级，请稍后重试!'
					})
					return
				}
				if (this.oplist.telecomType == 0 && this.whoact == 5) {
					uni.showToast({
						icon: 'none',
						title: '充值渠道正在升级，请稍后重试!'
					})
					return
				}
				if (this.type == 1) {
					if (!this.phone) {
						uni.showToast({
							icon: 'none',
							title: '请输入手机号!'
						})
						return
					}
					if (this.whoact == 0) {
						uni.showToast({
							icon: 'none',
							title: '请选择运营商!'
						})
						return
					}
					if (this.numact == 4) {
						uni.showToast({
							icon: 'none',
							title: '请选择充值金额!'
						})
						return
					}
				} else {
					if (!this.ennum) {
						uni.showToast({
							icon: 'none',
							title: '请输入户号!'
						})
						return
					}
					if (!this.address) {
						uni.showToast({
							icon: 'none',
							title: '请输入所在省份!'
						})
						return
					}
					if (this.whoacts == 0) {
						uni.showToast({
							icon: 'none',
							title: '请选择类型!'
						})
						return
					}
					if (this.numact == 4) {
						uni.showToast({
							icon: 'none',
							title: '请选择充值金额!'
						})
						return
					}
				}
				if (this.act == 0) {
					if (this.pascheck) {
						this.show_key = true;
					} else {
						uni.showToast({
							icon: 'none',
							title: '请先设置支付密码!'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '../../mine/setpaypass'
							})
						}, 1000)
					}
				} else if (this.act == 2 || this.act == 1) {
					if (this.type == 1) {
						this.rechange()
					} else {
						this.dianrechange()
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择支付方式!'
					})
				}
			},
			whoacttabs(i) {
				this.whoact = i;
				this.getzhe();
			},
			whoactstabs(i) {
				this.whoacts = i
			},
			numacttabs(i) {
				this.numact = i
			},
			tabs(i) {
				this.speact = i
			},
			tabss(i) {
				this.act = i
			},
			click(item) {
				this.type = item.value
				this.phone = '';
				this.address = '';
				this.ennum = '';
				this.whoact = 0;
				this.whoacts = 0;
				this.getzhe();
			},
			dianrechange() {
				let data = {
					payNumber: this.ennum,
					areaStr: this.address,
					objectType: 1,
					objectTypeStr: '电费',
					accountType: this.whoacts,
					payMode: this.act,
					paymentType: this.numact,
					password: this.paypass
				}
				phrecharge(data).then(res => {
					if (res.success == 1) {
						if (this.act == 0) {
							uni.showToast({
								icon: 'none',
								title: '充值成功!'
							})
							// setTimeout(() => {
							// 	uni.switchTab({
							// 		url: '../index'
							// 	})
							// }, 1000)
						} else if (this.act == 2) {
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: res.data,
								success: function(res) {
									uni.showToast({
										icon: 'none',
										title: '充值成功!'
									})
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						} else if (this.act == 1) {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: res.data,
								success: function(res) {
									uni.showToast({
										icon: 'none',
										title: '充值成功!'
									})
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}

					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			rechange() {
				let data = {
					payNumber: this.phone,
					objectType: 0,
					objectTypeStr: '话费',
					accountType: this.whoact,
					payMode: this.act,
					paymentType: this.numact,
					password: this.paypass
				}
				phrecharge(data).then(res => {
					if (res.success == 1) {
						if (this.act == 0) {
							uni.showToast({
								icon: 'none',
								title: '充值成功!'
							})
							// setTimeout(() => {
							// 	uni.switchTab({
							// 		url: '../index'
							// 	})
							// }, 1000)
						} else if (this.act == 2) {
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: res.data,
								success: function(res) {
									uni.showToast({
										icon: 'none',
										title: '充值成功!'
									})
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						} else if (this.act == 1) {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: res.data,
								success: function(res) {
									uni.showToast({
										icon: 'none',
										title: '充值成功!'
									})
									console.log('success:' + JSON.stringify(res));
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
	}

	page {
		background: #f4f4f4;

	}

	.recharge {
		width: 100%;
	}

	.banner {
		background: #fc6758;
		padding: 40rpx;
		height: 260rpx;
		display: flex;
		align-items: center;
		color: #fff;

		.title {
			.title_name {
				font-size: 40rpx;
				margin-bottom: 10rpx;
			}

			.info {
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.6);
			}
		}
	}

	.big_content {
		padding: 0 20rpx;
		position: relative;
		top: -70rpx;
	}

	.re_box {
		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 0 20rpx 20rpx;
		margin-bottom: 30rpx;
	}

	.input_box {
		margin: 30rpx 0;

		.input_title {
			color: #666666;
			font-size: 30rpx;
			margin-bottom: 10rpx;
		}

		.input_in {
			margin-bottom: 10rpx;
		}
	}

	.cho_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 40rpx 0 20rpx;

		.cho_item {
			width: 30%;
			color: #666666;
			font-size: 30rpx;

			image {
				width: 25rpx;
				height: 25rpx;
				margin-right: 10rpx;
			}
		}
	}

	.kou_box {
		color: red;
		font-size: 28rpx;
	}

	.price_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10rpx 0;

		.pri_item {
			width: 32%;
			height: 135rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FC6758;
			background: #FFEAEA;
			border-radius: 20rpx;

			.num {
				font-weight: bold;
				font-size: 34rpx;
			}

			.yuan {
				font-size: 30rpx;
			}
		}

		.act {
			color: #FFFFFF;
			background: #FC6758;
		}
	}

	.way {
		color: #666666;
		font-size: 30rpx;
		margin: 20rpx 0;
	}

	.pay_box {
		margin: 20rpx 0;

		.pay_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20rpx 0 40rpx;

			.pay_left {
				color: #333333;
				font-size: 26rpx;
				display: flex;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}

			.pay_right {
				image {
					width: 25rpx;
					height: 25rpx;
				}

			}
		}
	}

	.tips {
		text-align: center;
		font-size: 24rpx;
		color: #999999;

		text {
			display: block;
			margin-bottom: 15rpx;
		}
	}

	.butt {
		margin: 40rpx 0;

		.btn {
			width: 100%;
			background: #FC6758;
			border-radius: 30rpx;
			text-align: center;
			color: #FFFFFF;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
</style>
